<!-- 页面 -->
<template>
<div>
     <h1>watch</h1>
     <!-- <input type="text" v-model="age"><br>
        <input type="text" v-model="o1.name"><br> -->
        <hr>
        <input type="text" v-model="o2.it">
        <input type="text" v-model="o2.it">
    <hr>
</div>
</template>
<!--vue -->
<script>
import {ref,watch,reactive} from 'vue'
export default {

    setup(){

        // // ----------ref
        // let age = ref(20)
        // let o1 = ref({
        //     id:1,
        //     name:"张三"
        // })
        // watch([age,o1],(newV,oldV)=>{
        //     console.log('监听',newV,oldV);
        // },{
        //     deep:true
        // })


        // --------------reactive
        let o2 = reactive({
            it:'web',
            info:{
                sex:'男'
            }
        })
        return{
            // ------ref
            // age,
            // o1

            o2
        }
    }
}
</script>
<!-- css样式 -->
<style>
</style>